<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：人员管理-历史登录时间弹窗
* @update: 2023年11月27日10:52:16
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible="showHistoryLoginDialog"
      width="662px"
      center
      custom-class="my-dialog  table-normal"
      @close="close"
    >
      <el-table
        :data="historyLoginTable"
        fit
        style="width: 100%"
        header-row-class-name="tableHeader"
        header-cell-class-name="tableTrHeader"
        row-class-name="tableRow"
        cell-class-name="tableCell"
      >
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="nickName" label="姓名" align="center" />
        <el-table-column
          prop="loginTime"
          label="登录时间"
          align="center"
          width="200"
        />
        <el-table-column prop="loginType" label="登录方式" align="center">
          <template v-slot="{ row }">
            {{
              row.loginType == 0 ? '密码' : row.loginType == 1 ? '人脸' : '指纹'
            }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <paging-component
        layout="total, prev, pager, next, jumper"
        :pager-count="5"
        :total="total"
        :page-size="historyForm.currentSize"
        :current-page="historyForm.currentPage"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { getHistoryLogin } from '@/api/personnelManage'
import pagingComponent from '@/components/PagingComponent/index.vue'
export default {
  components: { pagingComponent },
  props: {
    showHistoryLoginDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '登录历史记录'
    },
    idArray: {
      type: Array,
      default: []
    }
  },

  data() {
    return {
      historyForm: {
        userIds: '', // 用户id
        currentPage: 1, // 页码
        currentSize: 20 // 页尺寸
      },
      total: 0, // 总条数
      historyLoginTable: []
    }
  },
  created() {
    // this.renderList()
  },
  watch: {
    idArray: {
      async handler(val) {
        if (val.length > 0) {
          this.historyForm.userIds = val.join(',')
        } else {
          this.historyForm.userIds = ''
        }
        this.renderList()
      },
      deep: true
    }
  },
  computed: {
    bgColor() {
      return this.$store.state.settings.theme
    }
  },
  filters: {
    formatDate(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  methods: {
    async renderList() {
      const { result } = await getHistoryLogin(this.historyForm)
      this.total = Number(result.totalCount)
      this.historyLoginTable = result.currentData
    },
    // 关闭弹窗清空所有值
    close() {
      this.$emit('update:showHistoryLoginDialog', false)
      this.$emit('update:id', [])
      this.$emit('clearFn')
      this.historyForm = {
        userId: [],
        currentPage: 1, // 页码
        currentSize: 20 // 页尺寸
      }
    },
    // pageSize改变时会触发(每页数据条数)
    handleSizeChange(val) {
      this.historyForm.currentSize = val
      this.renderList()
    },
    // currentPage改变时会触发(当前页码数)
    handleCurrentChange(val) {
      this.historyForm.currentPage = val
      this.renderList()
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/styles/_handle.scss';

.el-row {
  text-align: center;
}
// 弹窗样式
::v-deep .el-dialog--center .el-dialog__body {
  padding: 0px 25px 30px;
}
// 表格样式
::v-deep .el-table {
  margin-top: 12px;
  background: transparent;
  border: none;
  // 表头行样式
  .tableHeader {
    height: 48px;
    -webkit-clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 15%,
      100% 85%,
      calc(100% - 10px) 100%,
      10px 100%,
      0 85%,
      0 15%
    );
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 15%,
      100% 85%,
      calc(100% - 10px) 100%,
      10px 100%,
      0 85%,
      0 15%
    );
  }
  // 表头单元格样式
  .tableTrHeader {
    background-color: transparent;
    border: none;
    font-weight: 400;
    color: #fff;
    font-size: 18px;
  }
  // 表格行样式
  .tableRow {
    background-color: transparent;
    border: none;
  }
  // 表格单元格样式
  .tableCell {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
  }
}
// 去除表头底部横线
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: none;
}
// 取消表格底部横线
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}
::v-deep .el-table__body-wrapper {
  height: 50vh;
  overflow-y: auto;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
</style>
